<template>
	<view class="content">
		<!-- 轮播图 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="item in banners">
				<image class="swiper-item-img" :src="item" mode=""></image>
			</swiper-item>
		</swiper>

		<!-- 列表 -->
		<view class="flex flex-wrap">
			<view v-for="item in 10" :key="item" @click="openLive" class="list-item">
				<image src="http://imgres.iefans.net/iefans/17/81785-202007171153335f1120bd02d32.jpg" mode="aspectFill"
					class="rounded list-item-img"></image>
				<view class="rounded-circle px-2 py-5r flex align-center number-1">
					<text class="iconfont iconqian text-warning mr-1"></text>
					<text class="text-white font-sm">0</text>
				</view>
				<view class="rounded-circle px-2 py-5r flex align-center popularity">
					<text class="font-sm text-white">人气：</text>
					<text class="text-white font-sm">0</text>
				</view>
				<view class="rounded-circle flex align-center live-box">
					<text class="font-sm text-white">直播间10</text>
				</view>
				<view class="rounded-circle px-2 flex align-center live-status">
					<text class="rounded-circle bg-danger status-text"></text><text
						class="font-sm text-white font-sm">已结束</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				banners: [
					"http://i-1-xda.qqxzb-img.com/2021/3/15/e567eb34-bd91-4c97-b20b-a5bc8afbf905.jpg?imageView2/2/q/85",
					"http://up.deskcity.org/pic_source/ff/f7/31/fff7313021c103571f97dd64c3b8f976.jpg"
				]
			}
		},
		onLoad() {

		},
		methods: {
			openLive() {
				uni.navigateTo({
					url: '../live/live'
				})
			}
		}
	}
</script>

<style scoped>
	.swiper-item-img {
		width: 100%;
	}

	.list-item {
		width: 375rpx;
		padding: 5rpx;
		box-sizing: border-box;
		position: relative;
	}

	.list-item-img {
		width: 365rpx;
		height: 375rpx;
	}

	.number-1 {
		position: absolute;
		left: 15rpx;
		top: 15rpx;
		background-color: rgba(0, 0, 0, 0.4);
	}

	.popularity {
		position: absolute;
		right: 15rpx;
		top: 15rpx;
		background-color: rgba(0, 0, 0, 0.4);
	}

	.live-box {
		position: absolute;
		left: 15rpx;
		bottom: 15rpx;
	}

	.live-status {
		position: absolute;
		right: 15rpx;
		bottom: 15rpx;
		background-color: rgba(0, 0, 0, 0.4);
	}

	.status-text {
		width: 20rpx;
		height: 20rpx;
	}
</style>
